<template>
  <el-dialog :title="title" :visible.sync="open" :width="imgWidth+40+'px'" append-to-body destroy-on-close>
    <img :src="imgUrl" :width="imgWidth" :height="imgHeight" />
  </el-dialog>
</template>
<script>
import dialogMixin from '../../../mixins/dialogMixin';

export default {
  name: "UploaderImagePreview",
  mixins: [dialogMixin],
  data() {
    return {
      title: "图片预览",
      imgUrl: '',
      imgWidth: 0,
      imgHeight: 0,
    };
  },
  mounted() { },
  methods: {
    showImg(imgUrl, width, height) {
      this.imgUrl = imgUrl;
      let rate = width / height;
      if (width > 700) {
        this.imgWidth = 700;
        this.imgHeight = 700 / rate;
      } else {
        this.imgWidth = width;
        this.imgHeight = height;
      }
      this.open = true;
    },
  },
};
</script>
<style scoped>
#vs {
  width: 300px;
  height: 200px;
}
</style>
